<div class="content-margin visualizer">
    <div class="flex-vertical absolute-fill">
        <div class="flex-header">
            <div class="form-inline clearfix toolbar" role="form">
                <div class="btn-group" data-bind="visible: !detailsGraph.viewActive()">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="min-width: 350px">
                        <span data-bind="text: currentIndexUi"></span>
                        <span class="caret"></span>
                    </button>
                    <div class="dropdown-menu has-info">
                        <ul class="menu max-height" role="menu">
                            <!-- ko foreach: indexes -->
                            <li data-bind="click: $root.setSelectedIndex"><a href="#" data-bind="text: $data"></a></li>
                            <!-- /ko -->
                            <!-- ko if: indexes().length === 0 -->
                            <li data-bind="click: function() { }"><a href="#">No indexes available</a></li>
                            <!-- /ko -->
                        </ul>
                        <div class="bg-info">
                            <i class="icon-info text-info"></i> <span>Map indexes are not available in a 'MapReduce' visualizer.</span>
                        </div>
                    </div>
                </div>

                <div class="form-group form-group-dropdown" data-bind="visible: hasIndexSelected() && !detailsGraph.viewActive()">
                    <div class="input-group">
                        <input id="documentId" type="text" data-bind="textInput: documents.documentId, hasFocus: documents.hasFocusDocumentId"
                               class="form-control" placeholder="Document ID" autocomplete="off">
                        <span class="input-group-btn" style="width: auto">
                            <button data-bind="click: addCurrentDocumentId, enable: !!documents.documentId() && !spinners.addDocument(), css: { 'btn-spinner': spinners.addDocument } "
                                    class="btn btn-default" type="button">
                                <i class="icon-plus"></i>
                            </button>
                        </span>
                    </div>
                    <ul class="dropdown-menu" role="menu" style="display: none;" data-bind="autoComplete: '#documentId', foreach: documents.documentIdsSearchResults">
                        <li role="presentation" data-bind="click: _.partial($root.selectDocumentId, label)">
                            <a role="menuitem" tabindex="-1" href="#" class="d-flex align-items-center justify-content-between gap-3">
                                <span data-bind="text: label"></span>
                                <i class="icon-check text-success" data-bind="visible: alreadyAdded"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div data-bind="visible: detailsGraph.viewActive" class="flex-horizontal">
                    <button data-bind="click: detailsGraph.goToMasterView, if: detailsGraph.viewActive" class="btn btn-default margin-right">
                        <i class="icon-arrow-left"></i> <span>Back</span>
                    </button>

                    <div data-bind="if: detailsGraph.currentTree">Reduce tree for key: <code class="margin-left margin-sm" data-bind="text: detailsGraph.currentTree().displayName"></code></div>
                </div>

            </div>
        </div>
        <div class="flex-grow dynamic-container">
            <div id="visualizerContainer">

            </div>
            <div class="absolute-center panel padding" data-bind="visible: !documents.documentIds().length">
                <i class="icon-info icon-xl"></i>

                <ol>
                    <li>Select index.</li>
                    <li>Enter document ids.</li>
                    <li>Select your area of interest by dragging. Zoom with the scroll wheel on your mouse.</li>
                    <li>Click on the tree for MapReduce details. </li>
                </ol>
            </div>
            
            <button class="btn btn-default nav-arrow left" title="Go to previous Map-Reduce tree" data-bind="click: detailsGraph.goToPreviousTree, enable: detailsGraph.canNavigateToPreviousTree, visible: detailsGraph.viewActive">
                <i class="icon-arrow-filled-left"></i>
            </button>
            <button class="btn btn-default nav-arrow right" title="Go to next Map-Reduce tree" data-bind="click: detailsGraph.goToNextTree, enable: detailsGraph.canNavigateToNextTree, visible: detailsGraph.viewActive">
                <i class="icon-arrow-filled-right"></i>
            </button>
        </div>
    </div>
    <div class="global-colors">
        <div class="color-definitions">
            <div class="highlight"></div>
            <div class="treeFill"></div>
            <div class="treeStroke"></div>
            <div class="treeLevelCount"></div>
            <div class="pageFill"></div>
            <div class="pageStroke"></div>
            <div class="documentName"></div>
            <div class="treeBg"></div>
            <div class="documents">
                <div class="doc1"></div>
                <div class="doc2"></div>
                <div class="doc3"></div>
                <div class="doc4"></div>
                <div class="doc5"></div>
                <div class="doc6"></div>
                <div class="doc7"></div>
                <div class="doc8"></div>
            </div>
        </div>
    </div>
    <div class="details-colors">
        <div class="color-definitions">
            <div class="canvasBg"></div>
            <div class="interPageConnection"></div>
            <div class="pageBg"></div>
            <div class="pageNumber"></div>
            <div class="nestedSectionBg"></div>
            <div class="nestedSectionFg"></div>
            <div class="collapsedLeafsBg"></div>
            <div class="collapsedLeafsFg"></div>
            <div class="entriesBg"></div>
            <div class="entryBg"></div>
            <div class="entryFg"></div>
            <div class="aggregationLabel"></div>
            <div class="aggregationValue"></div>
            <div class="documentText"></div>
        </div>
    </div>
</div>
